<template>
  <el-popover placement="bottom-end" :width="250" trigger="click">
    <template #reference>
      <svg-icon icon-class="a-list" class="dropdown-left" />
      {{ $t("common.tableSet") }}
    </template>
    <el-input v-model="name" :placeholder="$t('common.searchField')" clearable>
      <template #prefix>
        <i-ep-search />
      </template>
    </el-input>
    <ul class="table-list">
      <li
        v-for="(item, index) in filteredValues"
        :key="index"
        :class="{ 'fixed-active': item.fixed }"
        @click="fixedChange(index)"
      >
        <span @click.stop.prevent>
          <el-switch v-model="item.isColumn" @change="isShowChange" />
        </span>
        <span>{{ $t(item.label) }}</span>
        <span><svg-icon icon-class="a-fixed" /></span>
      </li>
    </ul>
    <div class="table-footer">
      <el-button size="small" plain @click="tableReset">
        {{ $t("common.reset") }}
      </el-button>
    </div>
  </el-popover>
</template>
<script setup lang="ts">
import type { TableColumn } from "@/types/index";
import { ref, computed } from "vue";

//可选列.
const tableLabel = defineModel<TableColumn[]>();
//Label 存储名称.
const props = defineProps({
  labelName: {
    type: String,
    default: "",
  },
});
//查询名
const name = ref();

//过滤列.
const filteredValues = computed(() => {
  if (tableLabel.value) {
    if (name.value) {
      return tableLabel.value.filter((item) => {
        return item.label.indexOf(name.value) !== -1;
      });
    } else {
      return tableLabel.value;
    }
  }
  return [];
});

//改变显示列.
function isShowChange() {
  //保存
  saveTableLable();
}

//固定列.
function fixedChange(index: number) {
  // 检查tableLabel是否存在
  if (!tableLabel.value) {
    console.error("tableLabel is not defined or null!");
    return;
  }

  // 切片取表标签数组从第0个到倒数第二个元素
  const table = tableLabel.value.slice(0, -1);

  if (index === 0 && table[0].fixed && !table[1].fixed) {
    table[0].fixed = false;
  } else {
    table.forEach((item, i) => {
      // 将每个元素的fixed属性设为false
      item.fixed = false;
      // 将每个元素的isColumn属性设为true
      item.isColumn = true;

      if (i <= index) {
        item.fixed = true;
      }
    });
  }

  //保存
  saveTableLable();
}

// 重置
function tableReset() {
  name.value = "";
  fixedChange(-1);
}

/** 表格设置更改函数 */
function saveTableLable() {
  let stableLabelStr = JSON.stringify(tableLabel.value);
  sessionStorage.setItem(props.labelName, stableLabelStr);
}

/** 获取本地存储的内容 */
function loadTableLable() {
  let stableLabelStr = sessionStorage.getItem(props.labelName);
  if (tableLabel.value && stableLabelStr) {
    let newtableLabel: TableColumn[] = JSON.parse(stableLabelStr);
    let map = new Map(newtableLabel.map((item) => [item.label, item]));

    for (let item1 of tableLabel.value) {
      if (map.has(item1.label)) {
        let item2 = map.get(item1.label);
        Object.assign(item1, item2);
      }
    }
  }
}

//Load 缓存.
loadTableLable();
</script>
<style scope lang="scss">
.table-list {
  li {
    display: flex;
    align-items: center;
    padding-top: 5px;
    height: 30px;
    cursor: pointer;

    span:nth-child(1) {
      margin-right: 10px;
    }

    span:nth-child(3) {
      margin-left: auto;
    }
  }

  li.fixed-active {
    background-color: #f1f1f1;
  }
}

.table-footer {
  border-top: 1px var(--el-border-color) var(--el-border-style);
  padding-top: 10px;
  display: flex;
  justify-content: flex-end;
}
</style>
